<template>
  <div>
    <div class="banner">
      <h1 class="banner-title">分类</h1>
      <div class="items">
        <router-link
          :to="'/category/' + category.name"
          :class="
            category.name === $route.params.name
              ? 'category-item category-selected'
              : 'category-item'
          "
          v-for="(category, index) in categories"
          :key="index"
        >
          {{ category.name }}
          <el-tag type="success" size="small" effect="dark">{{ category.count }}</el-tag>
        </router-link>
      </div>
    </div>
    <div>
      <el-row :gutter="0">
        <el-col :span="14" :offset="5">
          <!-- <router-link
            :to="'/category/' + category.name"
            :class="
              category.name === $route.params.name
                ? 'category-item category-selected'
                : 'category-item'
            "
            v-for="(category, index) in categories"
            :key="index"
          >
            {{ category.name }}
            <el-tag type="success" size="small" effect="dark">{{
              category.count
            }}</el-tag>
          </router-link> -->
          <article-item
            v-for="article in pageInfo.records"
            :key="article.id"
            :article="article"
          ></article-item>
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page.sync="pageInfo.current"
            :page-size="pageInfo.size"
            layout="prev, pager, next, jumper"
            :total="pageInfo.total"
            :hide-on-single-page="true"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import request from "@/http/request";

export default {
  name: "Category",
  data() {
    return {
      pageInfo: [],
      categories: [],
    };
  },
  components: {
    ArticleItem: () => import("@/components/ArticleItem.vue"),
  },
  methods: {
    getArticlesInCategoryView(page, limit) {
      const category = this.$route.params.name;
      if (category === "all") {
        request
          .getArticles(page, limit)
          .then((res) => {
            if (res.code === 0) {
              this.pageInfo = res.data;
            } else {
              this.$notify.error({
                title: "提示",
                message: res.msg,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$notify.error({
              title: "提示",
              message: "网络忙，文章获取失败",
            });
          });
      } else {
        request
          .getArticlesByCategory(category, page, limit)
          .then((res) => {
            if (res.code === 0) {
              this.pageInfo = res.data;
            } else {
              this.$notify.error({
                title: "提示",
                message: res.msg,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$notify.error({
              title: "提示",
              message: "网络忙，文章获取失败",
            });
          });
      }
    },
    loadData() {
      request
        .getAllCategories()
        .then((res) => {
          if (res.code === 0) {
            this.categories = res.data;
          } else {
            this.$notify.error({
              title: "提示",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.$notify.error({
            title: "提示",
            message: "网络忙，分类获取失败",
          });
        });
      this.getArticlesInCategoryView(1, 5);
    },
    handleCurrentChange(page) {
      this.getArticlesInCategoryView(page, 5);
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    console.log(to);
    console.log(from);
    this.loadData();
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped>
.items {
  margin: 0 24px;
  display: flex;
  justify-content: center;
  position: relative;
  top: 170px;
}
.banner {
  /* position: absolute; */
  background-color: #49b1f5 !important;
  top: -60px;
  left: 0;
  right: 0;
  height: 360px;
  animation: header-effect 1s;
  opacity: 0.8;
  background: url("http://img.xiyblog.cn/%E5%AF%BC%E8%88%AA/%E7%B2%BE%E5%9B%BE/19.jpg")
    center center / cover no-repeat;
}
.banner-title {
  animation: title-scale 1s;
  position: absolute;
  top: 6.5rem;
  padding: 0 0.5rem;
  width: 100%;
  font-size: 2.5rem;
  text-align: center;
  color: #eee;
}
.category-item {
  display: inline-block;
  width: 8%;
  text-decoration: none;
  font-size: 14px;
  color: #606266;
  margin-top: 10px;
  margin-right: 10px;
  padding: 8px;
  transition: all 0.5s;
  border-radius: 5px;
  border: 1px solid #ebeef5;
}
.category-item:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 8px 0px;
  cursor: pointer;
  transform: scale(1.03);
  color: #303133;
}
.category-selected {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 8px 0px;
  cursor: pointer;
  transform: scale(1.03);
  color: #303133;
}
.category-item .el-tag {
  float: right;
}
.el-pagination {
  margin: 20px 0;
  text-align: center;
}

/* // page-sizes选择器 */
::v-deep .el-select-dropdown__item li{
  background-color:transparent !important;
}
/* // prev和next箭头的样式 */
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev{
  background:transparent !important;
  background-color:transparent !important;
}
/* // prev和next箭头disabled的样式 */
::v-deep .el-pagination button:disabled {
  background-color:transparent !important;
}
/* // 页码样式 */
::v-deep .el-pager li{
  background-color:transparent !important;
}
/* // active的页码样式 */
::v-deep .el-pager li.active{
  color: #267aff !important;
}
</style>
